<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>缺货列表</title>
		<link rel="stylesheet" type="text/css" href="css/css.css"/>
		<script type="text/javascript" src="laydate/laydate.js" ></script>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="js/ajaxFunction.js" type="text/javascript" charset="utf-8"></script>
		<script>
		$(function() {
			// 获取系统配置信息
			$.ajax({
				url : 'SystemInfoServlet',
				method : 'POST',
				data : {
					'operation' : 'get'
				},
				dataType : 'json',
				success : function(info) {
					document.title=info.title;
					$('#company').append(info.company);
					$('#icp').append(info.icp);
				}
			});
			$(".logo").click(function(){  
	            var _this = $(this);//将当前的pimg元素作为_this传入函数  
	            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
	        }); 
			page = 1; // 当前页数
			totalpage = 1;// 总页数
			tempuser = getUserInfo($('.userinfo'));
			getTaskInfo(1);
		})
		function getTaskInfo(spage){
			page = spage;
			page = page > totalpage ? totalpage : page;
			page = page < 1 ? 1 : page;
			$.ajax({
				url : 'TaskInfoServlet',
				method : 'post',
				dataType : 'json',
				data : {'condition' : 'lack', 'page' : page, 'startTime' : $('#beginDate').attr('value'), 'endTime' : $('#endDate').attr('value')},
				success : function(tasks) {
						var str = "<tr>" + 
						"				<th>下单时间</th>" + 
						"				<th>订单号</th>" + 
						"				<th>商品</th>" + 
						"				<th>订单金额</th>" +  
						"				<th>总价</th>" + 
						"				<th>付款编号</th>" + 
						"				<th>状态</th>" + 
						"			</tr>";
						$.each(tasks, function(index,task,array){
							if (task.total == null){
								var oldTime = (new Date(task.time)).getTime();
							    var curTime = new Date(oldTime).Format("yyyy-MM-dd");
								str += "<tr>" + 
								"				<td class=\"text_center\">"+curTime+"</td>" + 
								"				<td class=\"text_center\">"+task.no+"</td>" + 
								"				<td>" + 
								"					<img src=\""+task.goods.pic+"\" class=\"pic100 fl\"/>" + 
								"					<div class=\"fl ml10\">" + 
								"						<div>名称 : " + 
								"							<span>"+task.goods.name+"</span>" + 
								"						</div>" + 
								"						<div>品牌 : " + 
								"							<span>"+task.goods.brand+"</span>" + 
								"						</div>" + 
								"						<div>型号 : " + 
								"							<span>"+task.goods.type+"</span>" + 
								"						</div>" + 
								"						<div>颜色 : " + 
								"							<span>"+task.goods.color+"</span>" + 
								"						</div>" + 
								"						<div>尺码 : " + 
								"							<span>"+task.goods.size+"</span>" + 
								"						</div>" + 
								"						<div>数量 : " + 
								"							<span>"+task.goodsNumber+"</span>" + 
								"						</div>" + 
								"					</div>" + 
								"				</td>" + 
								"				<td>" + 
								"						<div>商品原价 : <span class=\"red_span\">￥</span>" + 
								"							<span class=\"red_span\">"+task.goods.price+"</span>" + 
								"						</div>" + 
								"					<div>国际运费 : <span class=\"red_span\">￥</span>" + 
								"						<span class=\"red_span\">"+task.freight+"</span>" + 
								"					</div>"+
								"					<div>商品单价 : <span class=\"red_span\">￥</span>" + 
								"						<span class=\"red_span\">"+task.price+"</span>" + 
								"						<span class=\"red_span\"></span></div>";
								var row = 0;
								for (var i = 0; index + i < tasks.length && tasks[index + i].payNo == task.payNo; i++)
									row++;
								if (index == 0 || index > 0 && tasks[index-1].payNo != task.payNo){
									str += "<td rowspan='"+row+"'>总价: <span class=\"red_span\">￥"+task.totalPrice+"</span>" + 
									"				</td><td rowspan='"+row+"'><br /> 付款编号:"+task.payNo+" <br />";
								}
								str += "				<td class=\"text_center\">";
								switch(task.applyStatus){
								case '1': str += "未申请发货  <br />";break;
								case '2': str += "已申请发货  <br />";break;
								}
								switch(task.payStatus){
								case '1': str += "未付款<br />";break;
								case '2': str += "已付款   <br />";break;
								case '3': str += "已退款  <br />";break;
								}
								switch(task.isPayFreight){
								case '1': str += "国内运费已付  <br />";break;
								case '0': str += "国内运费未付  <br />";break;
								}
								str += "				</td></tr>";
							}else{
								totalpage = task.total / 5;
								totalpage = totalpage > parseInt(totalpage) ? parseInt(totalpage) + 1 : totalpage;
								$('#total').empty();
								$('#total').append(task.total);
								$('#curpage').empty();
								$('#curpage').append(page);
								$('#totalpage').empty();
								$('#totalpage').append(totalpage);
							}
						});
						$('#taskTable').empty();
						$('#taskTable').append(str);
				}
			})
		}
		</script>
	</head>
	<body>
		<!--
        	作者：sky
        	时间：2018-05-26
        	描述：header
        -->
		<div class="header_nav">
			<!--
	        	作者：sky
	        	时间：2018-05-26
	        	描述：导航
	        -->
	        <div class="fl">
	        	<img class="logo" src="img/logo.png"/>
	        </div>
			<div id="nav" class="fl">
				<ul>
					<li>
						<a href="index.html">购买列表</a>
					</li>
					<li>
						<a href="delivery.html">领货列表</a>
					</li>
					<li>
						<a href="applied.html">未发货列表</a>
					</li>
					<li>
						<a href="lack.html" class="clkNav">缺货列表</a>
					</li>
					<li>
						<a href="deliveried.html">已发货列表</a>
					</li>
				</ul>
			</div>
			<div class="fr">
				<div class="fl">
					<img src="img/headpic.jpg" class="headpic"/>&nbsp;&nbsp;
				</div>
				<!--
					用户名
                -->
				<span class="username userinfo"></span>&nbsp;
				<a href="LoginServlet?operation=logout" class="exitlogin">[退出]&nbsp;&nbsp;&nbsp;</a>
			</div>
		</div>
		<div class="clear"></div>
		<!--
	    	描述：提示框
	    -->
		<div class="alert alert-danger">注意：本页面只显示暂时缺少的商品。如果有未申请退款的订单将能看到退款申请按钮，申请退款后将会退回当前所有缺货商品的价钱。</div>
		<!--
        	描述：form表单提交信息
        -->
        <div class="center">
	        <form action="" method="post">
				<b>开始时间:</b><input type="text" id="beginDate" class="input_text"/>
				<b>结束时间:</b><input type="text" id="endDate" class="input_text"/>
				<input type="button" value="查询" class="input_submit" onclick="getTaskInfo(1)"/>
	        </form>
        </div>
		<div class="center font14em userinfo"></div>
		<!--
        	描述：订单列表
        -->
        <table id="taskTable" class="center tb_min">
        </table>
        <!-- <div align="left" valign="top" class="fenye">
			<span id="total"></span>条数据 <span id="curpage"></span>/<span id="totalpage"></span> 页&nbsp;&nbsp;
			<a href="javascript:void(0)" target="mainFrame" onfocus="this.blur()" onclick="getTaskInfo(1)">首页</a>&nbsp;&nbsp;
			<a href="javascript:void(0)" target="mainFrame" onfocus="this.blur()" onclick="getTaskInfo(--page)">上一页</a>&nbsp;&nbsp;
			<a href="javascript:void(0)" target="mainFrame" onfocus="this.blur()" onclick="getTaskInfo(++page)">下一页</a>&nbsp;&nbsp;
			<a href="javascript:void(0)" target="mainFrame" onfocus="this.blur()" onclick="getTaskInfo(totalpage)">尾页</a>
        </div> -->
        <!--
        	时间：2018-06-03
        	描述：弹出层图片
        -->
        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;" >
	    	<div id="innerdiv" style="position:absolute;">
	        	<img id="bigimg" style="border:5px solid #fff;" src="" />
	        </div>
        </div>
        <div style="width: 98%;border-top: solid 1px gainsboro;margin: 0 auto;line-height: 1.8em;font-size: 14px;text-align: center;padding-top: 8px;">
        	<span id="icp"></span><br />
			<span id="company"></span>
		</div>
		<script>
		$(function(){
			if (tempuser == null || tempuser == "" || tempuser.qq == null || tempuser.qq == "" || 
					tempuser.username == null || tempuser.username == ""){
				$('#first').click();
			}else if (tempuser.locked != '0'){
				location='lock.html';
			}
		});
		function alterUser(){
			$.ajax({
				url:"UserInfoServlet",
				data:{
					operation : "alt",
					qq : $("#qq").val(),
					addressee : $("#addressee").val(),
					tel : $("#tel").val(),
					addr : $("#addr").val()
				},
				dataType:'JSON',
				success:function(json){
					if (json.msg == '成功')
						location="index.html";
					else
						alert(json.msg);
				}
			});
		}
		</script>
		<input id="first" type="button" style="display:none;" data-toggle="modal" data-target="#myModal"/>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							第一次登陆？请完善用户信息！
						</h4>
					</div>
					<div class="modal-body">
						<table style="font-size:1.2em;height:180px;margin: 0 auto;">
							<tr>
								<td>QQ号：</td>
								<td><input id="qq" type="text" /></td>
							</tr>
							<tr>
								<td>收件人：</td>
								<td><input id="addressee" type="text" /><div style="float:right;color:red;">请勿填写陈女士或者英文名等</div></td>
							</tr>
							<tr>
								<td>联系电话：</td>
								<td><input id="tel" type="text" /></td>
							</tr>
							<tr>
								<td>收件地址：</td>
								<td><input id="addr" type="text" /><div style="color:red;">省、市、区、街道乡镇（设置为默认地址，请写详细）</div></td>
							</tr>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="alterUser()">
							确定
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	</body>
	<script>
		//执行一个laydate实例
		laydate.render({
		  elem: '#beginDate' //指定元素
		});
		laydate.render({
		  elem: '#endDate' //指定元素
		});
	</script>
</html>
